<template>
  <div class="container">
    <GlobalHeader :user="info"></GlobalHeader>
    <Loading v-if="loading" text="加载中..." background="rgba(255, 255, 255, .8)"></Loading>
    <!-- vue-router -->
    <router-view></router-view>
    <GlobalFooter></GlobalFooter>
  </div>
</template>

<script setup lang="ts">
import GlobalHeader from './components/GlobalHeader.vue';
import GlobalFooter from './components/GlobalFooter.vue';
import Loading from './components/Loading.vue';
import 'bootstrap/dist/css/bootstrap.min.css';
import { useStore } from 'vuex';
import { type GlobalDataProps } from './store/store'
import { computed, onMounted, watch } from 'vue';
import axios from 'axios';
import createMessage from './components/createMessage';
// 用户信息
const store = useStore<GlobalDataProps>()
// ref 类型
const info = computed(() => store.state.user)
const loading = computed(() => store.state.loading)
const token = computed(() => store.state.token)
const errMessage = computed(() => store.state.err)
onMounted(() => {
  // console.log(!info.value.isLogin, token.value);
  if (!info.value.isLogin && token.value) {
    axios.defaults.headers.common.Authorization = `Bearer ${token.value}`
    store.dispatch('getInfo')
  }
})
watch(() => errMessage.value.isErr, () => {
  const { isErr, message } = errMessage.value
  if (isErr && message) {
    createMessage(message, 'error')
  }
})
</script>


<style>
</style>
